import React, { PureComponent, Fragment} from 'react';
import {
  Table,
  Divider,
  Card,
  Pagination,
  Button,
  Row,
  Popconfirm,
  message
} from 'antd';
import {connect} from 'dva';
import styles from './style.less';
import AddEditUser from './components/AddEditUser';


/**
 * 用户管理
 */
@connect(({user_manage,loading}) => ({
  user_manage, loading: loading.effects['user_manage/queryUser']
}))
class User extends PureComponent {


  //挂载-初始化
  componentWillMount(){
    //this.mount = true;
    //if(this.mount == true){
      const { dispatch } = this.props;
      dispatch({
        type: 'user_manage/queryUser',
        payload: { currentPage: 1 }
      })
    //}

  }

  // componentWillReceiveProps(nextProps){
  //   console.log('nextProps',JSON.stringify(nextProps))
  // }

  // componentWillUnmount(){
  //   console.log("卸载")
  //   this.mount = false;
  // }

  //页码跳转
  getChangePage = (page) => {
    const {dispatch} = this.props;
    dispatch({
      type: 'user_manage/queryUser',
      payload: {currentPage:page}
    })
  }

  //保存用户
  saveUser = (values) => {
    const {dispatch} = this.props;
    dispatch({
      type: 'user_manage/saveUser',
      payload: {user:values}
    })
  }

  //删除用户
  deleteUser = (id) => {
    const {dispatch} = this.props;
    dispatch({
      type: 'user_manage/deleteUser',
      payload: {id: id}
    })
    message.success('删除成功');
  }

  // getRoles = () => {
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'user_manage/getRoleList',
  //   })
  // }

  render() {

    const {data,page,pageSize,total} = this.props.user_manage;
   // console.log('data'+JSON.stringify(data))
    const columns = [
      {
        title: 'id',
        dataIndex: 'id'
      },
      {
        title: '用户名',
        dataIndex: 'name',

      },{
        title: '密码',
        dataIndex: 'password',
        key: 'password'
      }, {
        title: '角色',
        dataIndex: 'role.name',
        key: 'role.name'
      },
      {
        title: '操作',
        key: 'operation',
        render:(record)=>{
          //console.log('record'+JSON.stringify(record.role))
          return (
            <div>
              <AddEditUser key={record.id} record={record} onSave={this.saveUser}>

                <a>编辑</a>
              </AddEditUser>
              <span className={styles.editAddDelete}>|</span>
              <Popconfirm title="你确定要删除吗？" onConfirm={()=>this.deleteUser(record.id)} okText="确定" cancelText="取消">
                <a>删除</a>
              </Popconfirm>
            </div>
          )
        }
      }
    ];
    return (
      <Fragment>
        <Card>
          <Row>
            <AddEditUser record={{}} onSave={this.saveUser}>
              <Button  type="primary" icon="plus">新建</Button>
            </AddEditUser>
          </Row>
          <br></br>
          <Row>
            <Table loading={this.props.loading} rowKey={(record) => (record.id)} dataSource={data} columns={columns} pagination={false} />
            <Pagination className="ant-table-pagination" current={page} pageSize={pageSize} total={total} onChange={this.getChangePage} ></Pagination>
          </Row>
        </Card>
      </Fragment>
    )
  }
}

export default User;
